<template>
  <!-- 修改素材授权 -->
  <div class="change-auth">
    <div class="cell-wrapper">
      <div class="cell">
        <div class="label">话题词列表</div>
      </div>
      <div 
        class="material-list"
      >
        <div v-if="list.length">
          <div class="item" v-for="(item, index) in list" :key="index">
            <p><span>{{ item.topic_words }}</span></p>
            <p @click="remove(index)">
              <span class="red-text">移除</span>
              <img src="@/assets/image/auth-del.png" alt="" class="del-icon">
            </p>
          </div>
        </div>
        <div v-else class="no-topic">
          暂无话题词
        </div>
        <div class="add-material" @click="newTopic" v-if="list.length < 10">+新建话题词</div>
      </div>
    </div>
    <div class="tip">
      *系统将根据您设置的话题词随机分配给到视频。最终是否应用以您在标题编辑时再确认，最多可输入10个
    </div>

    <van-popup v-model="showDialog">
      <div class="popup-content">
        <img
          @click="showDialog = false"
          src="@/assets/image/close-dialog.png" 
          alt="" class="close-dialog-btn"/>
        <div class="dialog-title">
          添加话题词
        </div>
        <input class="dialog-input" placeholder="最多可输入12个字" maxlength="12" v-model="inputValue"/>
        <div class="dialog-btns">
          <div class="dialog-cancel" @click="showDialog = false">取消</div>
          <div class="dialog-sure" @click="sure">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { listTopicWords, addTopicWords, deleteTopicWords } from "@/api/account.js"
export default {
  data () {
    return {
      inputValue: '',
      showDialog: false,
      list: []
    }
  },
  mounted () {
    this.getTopicList()
    document.title = '话题词管理'
  },
  methods: {
    sure () {
      if (this.inputValue) {
        addTopicWords({ topic_words: this.inputValue}).then(res => {
          Toast('添加成功')
          this.showDialog = false
          this.inputValue = ''
          this.getTopicList()
        })
      } else {
        Toast('话题词不能为空')
      }
    },
    getTopicList () {
      listTopicWords().then(res => {
        console.log('list:',res)
        this.list = res
      })
    },
    newTopic () {
      if (this.list.length >= 10) return
      this.showDialog = true
    },
    remove (index) {
      const item = this.list[index]
      deleteTopicWords({topic_words_id: item.topic_words_id}).then(res => {
        this.list.splice(index, 1)
        Toast('删除成功')
      })
    },
  }
}
</script>

<style scoped>
.tip {
  width: 87.2vw;
  margin: 0 auto;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: normal;
  line-height: 150%;
  color: #FF7628;
}
.dialog-btns {
  display: flex;
  justify-content: space-between;
  padding: 0 4.8vw;
}
.dialog-cancel, .dialog-sure {
  width: 27.2vw;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
}
.dialog-cancel {
  background: #CCCCCC;
} 
.dialog-sure {
  background: #0A67FF;
}
.dialog-input {
  margin-bottom: 13.33vw;
  width: 63.73vw;
  height: 9.6vw;
  border-radius: 1.07vw;
  background: #F8F8FA;
  box-sizing: border-box;
  padding-left: 4.27vw;
  border: 0.5px solid #E9E9E9;
}
input::-webkit-input-placeholder{
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  color: #CCCCCC;
}
.dialog-title {
  margin-bottom: 6.4vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #333333;
}
.close-dialog-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.13vw;
  height: 2.13vw;
  padding: 3.2vw;
}
.no-topic {
  margin-bottom: 3.73vw;
  text-align: center;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #CCCCCC;
}
.add-material {
  text-align: right;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #006EDD;
}
.red-text {
  margin-right: 0.8vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #D81E06;
}
.del-icon {
  width: 4vw;
  height: 4vw;
}
.gray-text {
  color: #999999;
}
.material-list {
  box-sizing: border-box;
  padding-top: 4.27vw;
  border-top: 0.32vw solid #E6E6E6;
  padding-bottom: 5.33vw;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 5.87vw;
  margin-bottom: 3.2vw;
  padding-left: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #666;
}
.item:last-of-type {
  margin-bottom: 5.33vw;
}
.item > p {
  display: flex;
  align-items: center;
}
.green-text {
  margin-right: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #00A6A7;
}
::v-deep .van-overlay {
  background: rgba(0,0,0,0.3);
}
::v-deep .van-popup {
  background: transparent;
}
.popup-content {
  position: relative;
  box-sizing: border-box;
  padding-top: 2.67vw;
  height: 48.53vw;
  width: 71.73vw;
  background: #fff;
  border-radius: 3.2vw;
  border: 0.27vw solid #E9E9E9;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
}
.cell-wrapper {
  width: 89.6vw;
  margin: 0 auto 4vw;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 2.13vw;
  padding: 0 5.33vw 0 3.2vw;
  box-sizing: border-box;
}
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 16.53vw;
  padding: 0 5.33vw 0 3.2vw;
  box-sizing: border-box;
}
.change-auth {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 5.33vw;
  background: #fff;
  z-index: 2;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #333333;
}
</style>